import {Divider} from "antd";
import './style.less'
import HTableForm, {HTableFormProps} from "@/components/ant-ext-table/HTableForm";
import HTable, {HTableProps} from "@/components/ant-ext-table/HTable";
import HTablePagination from "@/components/ant-ext-table/HTablePagination";
import React, {useCallback, useEffect} from "react";
import {AnyParams, AsyncSelectMethod} from "@/common/httptypes";
import {asyncThunkSelectTableData, HDataTableSlice} from "@/components/ant-ext-table/redux/dataTableSlice";
import {useTableDataRedux} from "@/components/ant-ext-table/redux/HAdminContext";
import HTableOption, {HTableOptionProps} from "@/components/ant-ext-table/HTableOption";


export type HDataTableProps<RecordType> = HTableProps<RecordType> & {
    option?: HTableOptionProps<RecordType>["option"]
    queryForm?: HTableFormProps;
    pageSizeOptions?: number[];
    params?: AnyParams<any>;
    selectMethod: AsyncSelectMethod;
}
const {setQueryParams, setSelectedRowKeys} = HDataTableSlice.actions

export default function HDataTable<RecordType>(props: HDataTableProps<RecordType>) {
    const {
        option,
        queryForm = {},
        pageSizeOptions = [10, 20, 30, 40, 50],
        selectMethod,
        params
    } = props;

    const [{
        selectRowKeys,
        dataSource,
        queryParams,
        loading,
        version
    }, dispatch] = useTableDataRedux<RecordType>()
    const selectData = useCallback(() => {
        dispatch(asyncThunkSelectTableData({method: selectMethod, params: queryParams}))
    }, [dispatch, selectMethod, queryParams])
    useEffect(() => {
        const param = {
            ...params,
            page: 1,
            size: pageSizeOptions[0],
        }
        dispatch(setQueryParams(param))
        // eslint-disable-next-line react-hooks/exhaustive-deps
    }, [selectMethod, params])

    useEffect(() => {
        if (version !== 0) {
            selectData()
        }
        // eslint-disable-next-line react-hooks/exhaustive-deps
    }, [version])

    return (
        <>
            <HTableForm
                {...queryForm}
                loading={loading}
                onFinish={() => {
                    dispatch(setQueryParams({...queryForm.form!.getFieldsValue(), ...params}))
                }}
                onReset={() => {
                    dispatch(setQueryParams({
                        page: 1,
                        size: queryParams.size,
                        ...queryForm.form!.getFieldsValue(),
                        ...params,
                    }))
                }}/>
            <Divider style={{margin: '10px 0px 0 0'}}/>
            <HTableOption selectData={selectData} selectRowKeys={selectRowKeys} dataSource={dataSource.records!}
                          rowKey={props.rowKey}
                          loading={loading} dispatch={dispatch}
                          option={option}
            />


            <HTable
                {...props}
                dispatch={dispatch}
                rowSelection={{
                    selectedRowKeys: selectRowKeys,
                    onChange: (keys) => {
                        dispatch(setSelectedRowKeys(keys))
                    },
                }}
                loading={loading}
                tablePageData={dataSource}
            />
            <HTablePagination
                pageSizeOptions={pageSizeOptions}
                size={queryParams?.size! as number}
                page={queryParams?.page as number}
                pagination={props.pagination as boolean}
                tablePageData={dataSource}
                onChange={(page, size) => {
                    dispatch(setQueryParams({page, size}))
                }}
            />
        </>
    )
}

